<template>
  <div id="app">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">公告详情</h1>
      <div class="mint-header-button is-right" />
    </header>
    <div v-for="(item, index) in list" :key="index">
      <div class="bgc_white pb_30 ">
        <div class="fw fs_18 pt_10">{{ item.hash.title }}</div>
        <div class="he pb_10 pt_20">
          <div>{{ item.hash.username }}</div>
          <div>{{ item.hash.createtime }}</div>
        </div>
        <div>
          <p class="pt_10" style="line-height:22px;">{{ item.hash.context }}</p>
          <div v-if="filesrc" style="width:100%;margin-top:10px;">
            <div  v-for="(item, index) in filesrc">
              <span style="display:inline-block;width:200px;">
                <a v-if="item.hash.fileurl.indexOf('.doc')>0 || item.hash.fileurl.indexOf('.pdf')>0 || item.hash.fileurl.indexOf('.xlsx')>0" :href="item.hash.fileurl" download>{{item.hash.filename}}</a>
                <img v-else :src="item.hash.fileurl" style="height:48px;display:block" @click="viewAttachments(item)">
              </span>
            </div>
          </div>

        </div>
      </div>

      <div v-for="(item, index) in reback" :key="index" class="bgc_white p_10" style="border-top:1px solid #f3f3f3;">
        <div class="he pb_10 pt_10">
          <div>{{ item.hash.username }}</div>
          <div>{{ item.hash.createdate }}</div>
        </div>
        <p class="pt_10" style="line-height:22px;">{{ item.hash.context }}</p>

      </div>
      <div style="box-shadow: 10px 0px 0px 0px #666666;width:100%;margin-top:60px;">
        <input v-model="rebackinput" style="width:80%;padding:5px 10px; width:100%;height:48px;position:fixed;bottom:0;" type="text" placeholder="请输入评论内容..."></div>
      <div style="margin:0px 10px 0 0;position:fixed;bottom:5px;right:0">
        <mt-button type="primary" style="width:72px;height:36px;font-size:14px;" @click="sendreback">发送</mt-button>
      </div>
    </div>

    <mt-popup v-model="popupVisible7" popup-transition="popup-fade" style="width:80%">
      <div v-if="img">
        <span style="display:inline-block;width:100%;">
          <img :src="img" alt style="width:100%;display:block" @click="popupVisible7=false">
        </span>
      </div>

      <div v-else style="text-align: center;
    line-height: 40px;">暂无数据</div>
    </mt-popup>

  </div>
</template>

<script>
export default {

  data () {
    return {
      popupVisible7: false,
      ts: this.newStore(),
      list: [],
      details: [],
      reback: [],
      rebackinput: '',
      rebacker: '',
      filesrc: '',
      img: ''
    }
  },
  mounted () {
    this.msgid = this.$route.query.msgid
    console.log(this.msgid, '111111222222')
    this.getannouncement()
  },
  methods: {
    getannouncement () {
      const req = {
        handle: '0191283F93927EDB050783D3551EBA1053F6ECF60F140298',
        msgid: this.msgid,
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.list = ts.d.data.operation1
          this.details = ts.d.data.operation2
          this.reback = ts.d.data.operation3
          this.filesrc = ts.d.data.operation4
        }
        console.log(this.list)
      })
    },
    sendreback () {
      const req = {
        handle: '0191283F93927EDB050783D3551EBA10520C55FD7F8BC16E35A0ACC69E1EA1BF',
        msgid: this.msgid,
        context: this.rebackinput,
        touserid: '',
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.$router.go(0)//点击按钮页面刷新
        console.log(this.context)
      })
    },
    option () {
      this.$router.push({
        name: 'announcement',
        query: {
          name: ''
        }
      })
    },
    viewAttachments (item) {
      this.img = item.hash.fileurl
      this.popupVisible7 = true
    },
    gonuxt (val, name) {
      this.$router.push({ name: val, query: { name: name } })
    },
  }
}
</script>
<style>
html,
body,
#app {
  height: 100%;
  background-color: #f3f3f3;
}
.fs_18 {
  font-size: 18px;
}
input {
  outline: none;
  border: none;
}
.he {
  display: flex;
  justify-content: space-between;
}
.bgc_white {
  background-color: #fff;
}
.p_10 {
  padding: 10px;
}
.pb_30 {
  padding: 10px;
}
.mt_10 {
  margin-top: 10px;
}
.border_b1 {
  border-bottom: 1px solid #f3f3f3;
}
.pb_10 {
  padding-bottom: 10px;
}
.pt_10 {
  padding-top: 10px;
}
.pt_20 {
  padding-top: 20px;
}
.border_t {
  border-top: 2px solid #26a2ff;
}
.width_90 {
  width: 94%;
}
.margin_center {
  margin: 20px auto 0 auto;
}
.fw {
  font-weight: bold;
}
.img_tj {
  width: 40px;
  height: 40px;
}
.weizhi {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.img_tp {
  width: 40%;
}

.tempContainer {
  position: fixed;
  width: 100%;
  margin-right: 0px;
  margin-left: 0px;
  text-align: center;
  z-index: 101;
}
</style>